<template>
	<view class="flex_ZC">
		<view class="back flex_c">
			<image :src="baseUrl + '/static/icon/left_jt.png'" mode="aspectFit" @click="goBack"></image>
			<!-- <text class="c0">{{advertDetails.title}}</text> -->
		</view>
		<view class="swipers">
			<image :src="advertDetails.image" mode="aspectFill"></image>
		</view>
		<!-- 分类  -->
		<view class="ification flex_ld" >
			<view class="ification_box flex_dq">
				<text :class="cursor == 1?'active':''" @click="cilckPx(1)">智能排序</text>
			</view>
			<view class="ification_box flex_dq">
				<text :class="cursor == 2?'active':''" @click="cilckPx(2)">销量最高</text>
			</view>
			<view class="ification_box flex_dq" @click="changeTaggle1">
				<text :class="cursor == 3?'active':''">More值排列</text>
				<view v-if="cursor != 3">
					<u-icon name="arrow-down" color="#333333" size="16"></u-icon>
				</view>
				<view v-else>
					<u-icon v-if="jfShow" name="arrow-down" color="#FFC300" size="16"></u-icon>
					<u-icon v-else name="arrow-up" color="#FFC300" size="16"></u-icon>
				</view>
			</view>
			<view class="ification_box flex_dq" @click="changeTaggle2">
				<text :class="cursor == 4?'active':''">价格排列</text>
				<view v-if="cursor != 4">
					<u-icon name="arrow-down" color="#333333" size="16"></u-icon>
				</view>
				<view v-else>
					<u-icon v-if="jgShow" name="arrow-down" color="#FFC300" size="16"></u-icon>
					<u-icon v-else name="arrow-up" color="#FFC300" size="16"></u-icon>
				</view>
			</view>
		</view>

		<view class="goods ">
			<view class="goods_box flex_Z" v-for="(item,index) in googsList" :key="index" @click="goDetails(item.id)">
				<image :src="item.thumb" mode="aspectFill"></image>
				<view class="goods_btm">
					<text class="f28 c3 overflow2">{{item.name}}</text>
					<text class="f24 c0  gradient1 integral">+ {{item.integral_proportion}}%More值</text>
					<view class="goods_btm_price flex_ld">
						<view class=" flex_dq">
							<text class="f24 c4">￥</text>
							<text class="f34 c4 fw7 price">{{item.min_price}}</text>
							<text class="f24 c9 delect">￥{{item.max_origin_price}}</text>
						</view>
						<!-- <text class="f24 c9">已抢4887件</text> -->
					</view>
				</view>
			</view>
		</view>

		<!-- 暂无数据 / 加载更多 -->
		<noDatas :xxxList="googsList" :status="status"></noDatas>
	</view>
</template>

<script>
	import {
		cloudActivityDetail,cloudList
	} from "../../api/cloudMall.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				ids:'',
				categoryId: '', //商品id
				cursor: 1, //选择哪一分类
				sortField: '', // 排序字段
				sortBy: '', // 排序方式
				jfShow: false,
				jgShow: false,
				googsList: [],
				advertDetails:{},
			}
		},
		onLoad(e) {
			console.log(e);
			this.ids = e.id
			this.initList()
		},
		methods: {
			// 清空内容
			refreshArray() {
				this.page = 1,
				this.googsList = [],
				this.initList()
			},
			// 初始化
			initList() {
				let data = {
					page: this.page,
					page_size: this.size,
					hot_recommend_id:this.ids,
					sort_field: this.sortField,
					sort_by: this.sortBy,
				};
				cloudActivityDetail(data).then(res => {
					console.log('商品列表', res)
					if(res.code == 1){
						this.advertDetails = res.data.advert_details
						let list = res.data.goods_list.data;
						this.googsList = this.page == 1 ? list : this.googsList.concat(list);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			//获取页面栈的长度
			goBack() {
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			// 清空内容
			clear() {
				console.log('清空内容');
				this.searchName = ''
				this.categoryId = ''
			},
			// 回车键触发
			changeSearch() {
				console.log('回车键触发');
				this.refreshArray()
			},
			// 点击搜索按钮触发
			cilckCustom() {
				console.log('点击搜索按钮触发');
				this.refreshArray()
			},
			cilckPx(e) {
				console.log(e);
				this.cursor = e
				this.sortBy = ''
				if (e == 1) {
					this.sortField = ''
				} else if (e == 2) {
					this.sortField = 'sales'
				}
				this.refreshArray()
			},
			changeTaggle1() {
				this.cursor = 3
				this.jfShow = !this.jfShow
				this.jgShow = false
				this.sortField = 'integral_proportion'
				if (this.jfShow) {
					this.sortBy = 'desc'
				} else {
					this.sortBy = 'asc'
				}
				this.refreshArray()
			},
			changeTaggle2() {
				this.cursor = 4
				this.sortField = 'price'
				this.jgShow = !this.jgShow
				this.jfShow = false
				if (this.jgShow) {
					this.sortBy = 'desc'
				} else {
					this.sortBy = 'asc'
				}
				this.refreshArray()
			},
			// 去详情
			goDetails(id) {
				uni.navigateTo({
					url: '/pagesMy/cloudCat/goodsDetails?id=' + id
				})
			}

		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.cursor = 1
				that.refreshArray()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>

<style scoped>

	.back {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 88rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 40rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}

	.back>image {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}
	.swipers{
		position: relative;
		width: 750rpx;
		height: 1030rpx;
	}
	.swipers>image{
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 1350rpx;
		z-index: 2;
	}

	.ification {
		position: relative;
		width: 690rpx;
		margin: 30rpx auto;
		z-index: 5;
	}

	.ification_box {
		font-size: 26rpx;
		color: #333333;
	}

	.active {
		color: #FFC300 !important;
	}

	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		width: 690rpx;
		margin: 0rpx auto;
		position: relative;
		z-index: 3;
	}

	.goods_box {
		width: 336rpx;
		height: 550rpx;
		border-radius: 20rpx;
		background: #ffffff;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
	}

	.goods_box>image {
		width: 336rpx;
		height: 336rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.goods_btm {
		width: 100%;
		padding: 10rpx;
	}

	.integral {
		padding: 4rpx 14rpx;
		border-radius: 10rpx;
	}

	.goods_btm_price {
		margin-top: 20rpx;
	}

	.price {
		margin-right: 6rpx;
	}
</style>